import React from 'react'
import { Text, View, TouchableOpacity, Image, Modal, Linking, ScrollView } from 'react-native'
import { Metrics, Colors, Fonts } from '../../Themes'
import { API, WINDOW } from '../../Services'
import styles from '../Styles/CommonContainerStyles'
import ImageViewer from 'react-native-image-zoom-viewer'
import { createImageProgress } from 'react-native-image-progress'
import FastImage from 'react-native-fast-image'
const CaceImage = createImageProgress(FastImage)
import Moment from 'moment'

class ProductDetailScreen extends React.Component {

    constructor(props) {
        super(props)
        this.state = {
            zoom: 1,
            images_visible: false,
            index: 0,
            ID: this.props.route.params.item.ID,
            detail: null,
        }
    }

    componentDidMount() {
        this.articleDetail()
    }

    articleDetail() {
        const { ID } = this.state
        let key = WINDOW.showToastLoad()
        API.articleDetail(ID).then((response) => {
            WINDOW.hideToast(key)
            const { ok, data } = response
            if (ok) {
                this.setState({ detail: data.article })
            } else {
                WINDOW.showToastError(data.msg || '请求失败！')
            }
        })
    }

    render() {
        if (!this.state.detail) {
            return <View />
        }
        let image = this.state.detail.imgPath
        let descript = this.state.detail.contentStr
        let createtime = this.state.detail.createTime
        let author = this.state.detail.author || '中国竹网'
        let images = [{
            url: WINDOW.getFullImage(image),
            freeHeight: true,
            width: Metrics.screenWidth,
            height: Metrics.screenHeight,
            props: {
                priority: FastImage.priority.normal,
                resizeMode: FastImage.resizeMode.contain
            }
        },]
        return (
            <ScrollView style={[styles.container, { backgroundColor: 'white' }]}>
                <Text style={{ marginLeft: 15, marginRight: 10, marginTop: 20, fontSize: 25 }}>{this.state.detail.title}</Text>
                <Text style={{ marginLeft: 15, marginTop: 15, fontSize: Fonts.sizeFour, color: Colors.graytextColor }}>{author}  |  {Moment(createtime).format("YYYY-MM-DD")}</Text>
                {image ?
                    <TouchableOpacity onPress={() => this.setState({ images_visible: true })} style={{ marginTop: 15, justifyContent: 'center', alignItems: 'center' }}>
                        <CaceImage
                            style={{ width: Metrics.screenWidth - 30, height: 200 }}
                            source={{ uri: WINDOW.getFullImage(image), priority: FastImage.priority.normal }}
                            resizeMode={FastImage.resizeMode.cover} />
                    </TouchableOpacity>
                    : null}
                {descript ? <Text style={{ marginLeft: 15, marginTop: 12, marginRight: 10, fontSize: Fonts.sizeTwo, letterSpacing: 1, color: Colors.contentColor, lineHeight: 23 }}>{descript}</Text> : null}
                <Modal
                    visible={this.state.images_visible}
                    transparent={true}>
                    <ImageViewer
                        imageUrls={images}
                        renderImage={(props) => <CaceImage {...props} />}
                        index={this.state.index}
                        onClick={() => this.setState({ images_visible: false })}
                        enableSwipeDown={true} />
                </Modal>
            </ScrollView>
        )
    }
}

export default ProductDetailScreen
